<!doctype html>
<html lang="zh-Hans-CN">

<head>
    <title>不刷新页面历史跳转获取数据</title>
    <meta charset="utf-8">
    <meta name="keywords" content="跳转, 不刷新, 数据更新">
    <meta name="description" content="">
    <meta name="author" content="chen">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1">
    <!--<link rel="stylesheet" type="css/text" media="screen and ( min-width: 1200px )" href="">-->
    <link rel="stylesheet" type="text/css" media="screen" href="">
    
    <style>
        /*@import url("css/name.css") screen and ( min-width: 1200px );*/
        body {
            margin: 0;
            padding: 0;
            background-color: gray;
        }
        #box {
            width: 80%;
            height: 400px;
            border: 1px solid white;
            margin: 50px auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            text-align: center;
        }
        ul {
            width: 150px;
            height: auto;
        }
        li {
            list-style: none;
            height: 35px;
            line-height: 35px;
            color: black;
            border: 1px solid white;
            margin-bottom: 15px;
        }
        #con {
            width: 400px;
            height: 300px;
            border: 1px solid white;
        }
    </style>
</head>

<body>
    <p>数据来源自data.js</p>
    <p>实现的功能是通过history历史管理功能, 在跳转后实现不刷新页面也能实现数据更新</p>
    <div id="box">
        <ul id="list"></ul>
        <div id="con"></div>
    </div>
    <script src="./data.js"></script>
    <script>
        let list = document.getElementById("list");
        //打印数据测试data.js数据是否可用
        console.log("数据可用性检测: ", /\w/i.test(data));

        //新建一个空字符串并添加data数据的项, 然后包进<li></li>
        let str = new String();
        for(let key in data) {
            str += '<li data-name="' + key + '">' + key + '</li>'
        }

        //更新list中的数据
        list.innerHTML = str;

        let aLi = document.querySelectorAll("li");
        //给每个li绑定一个点击事件
        aLi.forEach(function(item, index) {
            item.onclick = function() {
                //可以获取到自己设置的自定义属性
                console.log( this.dataset["name"]);
                //当然也可以通过获取的属性在data中找到对应的value值
                console.log( data[this.dataset["name"]] );

                //添加历史记录
                let name = decodeURI( this.dataset["name"]);
                if(window.history && window.history.pushState) {
                    window.history.pushState(name, "追梦", "#path-" + name);
                    //name 历史记录的名称
                    //"追梦" 标题, 浏览器暂时不支持
                    //#path- hash值(跳转路径)
                }
            } 
        })

        //监听跳转历史状态
        window.onpopstate = function(e) {
            console.log("e.state: ", e.state);
            if( e.state ) {
                con.innerHTML = data[e.state];
            }
        }

        //监听hash的变化
        window.onhashchange = function() {
            console.log( "hash: ", window.location.hash );
        }
    </script>
</body>

</html>